//手风琴效果
$(function(){
	//首先ajax请求动态创建元素
	$.ajax({
		url:"js/acc.json",
		type:"post",
		data:"null",
		success:function(data){
			var arr=data;
			for(var i=0;i<arr.length;i++){
				//遍历数组动态创建对象，并给相应的类名
				var minpic=$("<a href='#'></a>");
				var percent=$("<span></span>");
				var say=$("<b></b>");
				var timu=$("<p></p>");
				var right=$("<div></div>");
				right.addClass("accright")
				var paper=$("<p></p>");
				paper.addClass("paper");
				var paperdown=$("<div></div>");
				paperdown.addClass("paperdown");
				var egg=$("<span></span>");
				egg.addClass("egg");
				var user=$("<span></span>");
				user.addClass("user");
				var username=$("<span></span>");
				username.addClass("username");
				var userlogo=$("<span></span>");
				userlogo.addClass("userlogo");
				if(i==0){
					minpic.addClass("bgpic");
					percent.addClass("bigper");
					say.addClass("sayno");
					timu.addClass("bigtimu");
				}
				else{
					minpic.addClass("minpic");
					percent.addClass("percent");
					say.addClass("say");
					timu.addClass("timu");
				}
				minpic.css({"background":"url("+arr[i].url+")no-repeat","background-size":"cover"});
				percent.text("推荐度"+arr[i].percent);
				say.text(arr[i].number+"人已评价");
				timu.text(arr[i].timu);
				paper.text(arr[i].paper);
				egg.text("["+arr[i].number+"]");
				username.text(arr[i].user);
				userlogo.css("background","url("+arr[i].userurl+")no-repeat");
				//将动态创建的对象放入相应的位置
				user.append(username);
				user.append(userlogo);
				paperdown.append(egg);
				paperdown.append(user);
				right.append(paper);
				right.append(paperdown);
				//放入li
				$(".acc-bottom>li").eq(i).append(minpic);
				$(".acc-bottom>li").eq(i).append(percent);
				$(".acc-bottom>li").eq(i).append(say);
				$(".acc-bottom>li").eq(i).append(timu);
				$(".acc-bottom>li").eq(i).append(right);
			}
		}
	})
		//.acc-bottom>鼠标移入事件
	var flag=true;
	$(".acc-bottom>li").on("mouseenter",function(){
		if(flag){
			flag=false;
			//宽度小于670，放大，其他兄弟减小
		if($(this).width()<670){
			$(this).stop().animate({
				width:"670px"
			},500,function(){
				flag=true;
				$(this).children("a").removeClass("minpic").addClass("bgpic");
				$(this).siblings().children("a").removeClass("bgpic").addClass("minpic");
				$(this).children("p").removeClass("timu").addClass("bigtimu");
				$(this).siblings().children("p").removeClass("bigtimu").addClass("timu");
				$(this).children("span").removeClass("percent").addClass("bigper");
				$(this).siblings().children("span").removeClass("bigper").addClass("percent");
				$(this).children("b").removeClass("say").addClass("sayno");
				$(this).siblings().children("b").removeClass("sayno").addClass("say");
			});
			$(this).siblings().stop().animate({
				width:"174px"
			},200);
		}else{
			flag=true;
		}
		}
		
		
	})
})
